<script setup lang="ts">
import MilkdownEditor from '~/components/MilkdownEditor.vue';
import BasicLayout from '~/components/BasicLayout/index.vue'
import { useMarkdownStore } from '~/store/markdown';
import { storeToRefs } from 'pinia';

const { filename, isSaved } = storeToRefs(useMarkdownStore())

</script>

<template>
  <BasicLayout>
    <div class="flex my-3 w-50">
      <ElInput v-model="filename" placeholder="Title" size="large" />
      <div>
        <el-tag :type="isSaved ? 'success' : 'warning'" class="mx-1" effect="light" round>
          {{ isSaved ? 'Unmodified' : 'Modified' }}
        </el-tag>
      </div>
    </div>
    <MilkdownEditor />
  </BasicLayout>
</template>

<style>
@import "~/assets/font.css";
@import "~/assets/mdi.css";
</style>